export default {
  data () {
    return {
      rolesData: [
        {
          roleName: '主管',
          roleDesc: '技术负责人'
        }
      ],
      // 控制分配权限弹窗的属性
      dialogRightsVisible: false,
      // 权限列表树
      ruleRightsData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      // 权限列表树的设置
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      // 激活 分配权限弹窗的 角色id
      currentRoleID: -1
    }
  },
  methods: {
    // 自定义索引列的排序方式
    startWith0 (index) {
      return index
    },
    // 从服务器获取角色列表
    async loadRolesData () {
      let res = await this.$axios.get('roles')

      // console.log(res)

      this.rolesData = res.data.data
    },
    // 点击分配权限的处理函数
    async ruleRights (row) {
      // row.children ===>[]第一级权限
      this.dialogRightsVisible = true
      // 保存激活 分配权限弹窗的 角色id
      this.currentRoleID = row.id

      // 向后台发送请求，获取权限列表
      let res = await this.$axios('rights/tree')

      console.log(res)

      this.ruleRightsData = res.data.data

      // 本来给tree组件打勾，需要用到组件里的方法，是要操作dom的
      // 可以在tree组件的钩子函数mounted()里写，但是tree组件不是我封装的
      // 因此在这里调用nextTick()，nextTick里的回调将在基于数据更新后，dom重新渲染后执行

      this.$nextTick(() => {
        let keys = []
        row.children.forEach(item => {
          item.children.forEach(item => {
            keys.push(item.id)
          })
        })
        this.$refs.tree.setCheckedKeys(keys)
      })
    },
    // 分配权限窗口点击确定后的处理函数
    async rightsChange () {
      // 收集所有的被勾选项

      // 获取tree中打勾的项
      let arry1 = this.$refs.tree.getCheckedKeys()
      // 获取tree中打半勾的项
      let arry2 = this.$refs.tree.getHalfCheckedKeys()

      let arrys = arry1.concat(arry2)

      let rids = arrys.join(',')

      // console.log(rids)

      let res = await this.$axios.post(`roles/${this.currentRoleID}/rights`, {
        rids
      })

      console.log(res)

      // 关闭分配权限模态框
      this.dialogRightsVisible = false
      // 刷新列表
      this.loadRolesData()
      // 提示成功
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      })
    }
  },
  created () {
    // 渲染前，加载数据
    this.loadRolesData()
  }
}
